<template lang="html">
    <div class="">
        <i class="glyphicon" :style="fontSize" :class="item" v-for="item in stars"></i>
    </div>
</template>

<script>
export default {
	props: {
		score: {
			type: Number
		},
		size: {
			type: Number
		}
	},
	data() {
		return {
			stars: [],
			fontSize: {}
		}
	},
	mounted() {
		let arr = [];
		for (let i = 0; i < this.score; i++) {
			arr.push('glyphicon-star')
		}
		for (let i = 0; i < 5 - this.score; i++) {
			arr.push('glyphicon-star-empty')
		}
		this.stars = arr;
		this.fontSize = {
			'font-size': this.size + 'px'
		}
		console.log(this.fontSize);
	}


}
</script>

<style lang="css">
</style>
